<template>
  <div>
    <div class="CollectionView">
      <div class="titlebox">
        <div class="head">
          <div class="left" @click="back">
            <svg
              t="1668684139650"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2655"
              width="200"
              height="200"
            >
              <path
                d="M401.066667 512l302.933333 302.933333-59.733333 59.733334L341.333333 571.733333 281.6 512 341.333333 452.266667l302.933334-302.933334 59.733333 59.733334L401.066667 512z"
                fill="#5a5a5a"
                p-id="2656"
              ></path>
            </svg>
          </div>

          <div class="middle">我的收藏</div>

          <div class="right" v-show="!Ishow" @click="edit2">完成</div>

          <div class="right" v-show="Ishow"  @click="edit">编辑</div>

        </div>
      </div>

      <div class="bookbigbox">
        <div class="bookbox">
          <div class="book" v-for="item in lists" :key="item.bookId">
            <div class="input">
              <input type="checkbox" v-model="item.checked" />
            </div>
            <div class="img">
              <img :src="item.bookCover" alt="" />
            </div>
            <div class="textbox">
              <div class="txt">
                <div class="name">{{item.bookAuthor}}</div>
                <div class="author">{{item.bookName}}</div>
              </div>

              <div class="pricebox"></div>
            </div>
          </div>

         
        </div>
      </div>

      <div class="remove" v-show="!Ishow">
        <div class="box" >
          <p @click="del">删除</p>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
export default {
  data() {
    return {
      checked:true,
      listss:[],
      Ishow:true,
      lists: [
        {
          id: 1,
          author: "小明",
          name: "斗破",
          checked:true
        },
        {
          id: 2,
          author: "小李",
          name: "斗合",
                    checked:false
        },
        {
          id: 3,
          author: "小风",
          name: "斗针",
                    checked:false
        },
      ],
    };
  },

  methods: {


    // 返回
    back() {
      this.$router.back();
    },



    // 删除
    del(){

    // let liss =  this.lists.findIndex(item=>{
    //     return item.checked
    //   })

   let liss =  this.lists.filter(item=>{
      return  !item.checked
    })

    this.lists =liss

      console.log(liss)

      localStorage.setItem("bookcont", JSON.stringify(this.lists));

    },


    // 切换完成
    edit(){
      this.Ishow = false
    },


    // 切换编辑
    edit2(){
      this.Ishow = true
    }



  },


  created(){
    this.lists = JSON.parse(window.localStorage.getItem("bookcont"))
  }
};
</script>

<style lang="scss" scoped>
.CollectionView {
  position: relative;
  .titlebox {
    padding: 20px 10px 20px 6px;
    background-color: #fff;
    border-bottom: 2px solid #f5f5f5;

    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        .icon {
          width: auto;
          height: 25px;
        }
      }

      .middle {
        font-size: 20px;
      }

      .right {
        font-size: 13px;
      }
    }
  }

  .bookbigbox {
    padding: 10px 14px;
    background-color: #fff;
    .bookbox {
      .book {
        display: flex;
        margin-bottom: 6px;
        .input {
          display: flex;
          margin-right: 10px;
        }

        .img {
          margin-right: 6px;
          img {
            width: 69px;
            height: 100px;
          }
        }

        .textbox {
          .txt {
            .name {
              font-size: 16px;
              color: #000;
              font-weight: bold;
            }
            .author {
              font-size: 14px;
              color: #cbd1db;
            }
          }
        }
      }
    }
  }

  .remove {
    position: fixed;
    bottom: 2px;
    width: 100%;
    .box {
      display: flex;
      justify-content: space-around;
      p {
        color: #fff;
        padding: 10px 160px;
        background-color: #d57c5b;
        border-radius: 20px;
      }
    }
  }
}
</style>